<template>
  <PageWrapper title="excel数据导入示例">
    <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
      <a-button class="m-3"> 导入Excel </a-button>
    </ImpExcel>
    <BasicTable
      v-for="(table, index) in tableListRef"
      :key="index"
      :title="table.title"
      :columns="table.columns"
      :dataSource="table.dataSource"
    />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue'

  import { ImpExcel, ExcelData } from '/@/components/Excel'
  import { BasicTable, BasicColumn } from '/@/components/Table'
  import { PageWrapper } from '/@/components/Page'

  export default defineComponent({
    components: { BasicTable, ImpExcel, PageWrapper },

    setup() {
      const tableListRef = ref<
        {
          title: string
          columns?: any[]
          dataSource?: any[]
        }[]
      >([])

      function loadDataSuccess(excelDataList: ExcelData[]) {
        tableListRef.value = []
        console.log(excelDataList)
        for (const excelData of excelDataList) {
          const {
            header,
            results,
            meta: { sheetName },
          } = excelData
          const columns: BasicColumn[] = []
          for (const title of header) {
            columns.push({ title, dataIndex: title })
          }
          tableListRef.value.push({ title: sheetName, dataSource: results, columns })
        }
      }

      return {
        loadDataSuccess,
        tableListRef,
      }
    },
  })
</script>
